import React from 'react'
import ReactDOM from 'react-dom';
import '../css/touch.less'
import Area from '../components/area';
import IO from 'SocketClient/socket.io.js';
import {host} from '../config/host'
export default class Main extends React.Component{
    constructor(props) {
        super(props)
        this.state =  {
            areasData:{},
            dataready: false
        }
    }
    sendAction = (areaType, screenIndex, mediaType, mediaURL) => {
      this.messagecenter.emit('action',{areaType, screenIndex, mediaType, mediaURL})
    }
    componentDidMount () {
        // connedt to server by socket.io
       this.config = IO.connect(`http://${host}/config`);
       console.log(host)
       this.messagecenter = IO.connect(`http://${host}/messageCenter1`);

        this.config.on('config', (res) => {
            this.setState({
                areasData: res,
                dataready: true
            })
        });
    }
    render() {
        return <div className="container-touch ">

            {!this.state.dataready && <div className='loading'>正在建立链接....</div>}
            {this.state.dataready && this.state.areasData.map((obj, index) => {
                return <Area {...obj} key={index} sendAction = {this.sendAction} />
            })}

        </div>
    }
}
